<template>
  <div id="myEmail">
    <div class="header">
      <el-button class="btn colorBtn" @click="jumpTo('/base/personCenter/myEmail/send')">写邮件</el-button>
    </div>
    <hr/>
    <div class="body">
      <ul class="emailList"  v-loading="isLoad">
        <li v-for="li of emailList">
          <span class="emailInfo">
            <img class="portrait" src="../../assets/person.jpg"/>
            <span>
              <span class="sender">{{li.senderId.nickname}}</span><br/>
              <span class="date">{{li.time}}</span><br/><br/>
              <span :class="[li.status=='0'?'noPay':'',li.status=='1'?'noCheck':'','emailStatus']">{{emailStatus[li.status]}}</span>
            </span>
          </span>
          <span class="operate">
            <el-button class="btn colorBtn" @click="jumpTo('/base/personCenter/myEmail/check',li)">查看</el-button> <br/>
            <el-button class="btn" @click="deleteEmail">删除</el-button>
          </span>
        </li>
        <li class="noEmailTip" v-if="noEmailTip">暂无邮件记录</li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default{
    name:'myEmail',
    data(){
      return {
        emailList:[
//          {
//            "id": 2,
//            "senderId": {
//              "id": 3,
//              "num": "f845c990175e4d56a4888ac2b6219ac9",
//              "nickname": "Sean2",
//              "headImgUrl": null
//            },
//            "receiverId": null,
//            "status": 0,
//            "content": null,
//            "time": "2017-08-29 16:42:11",
//            "stampId": {
//              "id": 5,
//              "name": "邮票1",
//              "point": 10,
//              "description": "这是邮票1"
//            },
//            "title": ""
//          },
        ],
        emailStatus: {
          0: '未付费',
          1: '已付费，未查看',
          2: '已查看',
        },
        noEmailTip:false,
        pageSize:'',
        currentPage:'',
        totalPage:'',
        isLoad: false,


      }
    },
    methods:{
      checkEmail(){

      },
      deleteEmail(){

      },
      jumpTo(url,li){
        if(url.indexOf('check') != -1){
          if(li.status == '0'){
            this.$confirm('支付$10000000,黑心商家咋滴啦！', '请支付', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(() => {
              this.payForEmail(url,li.id);
            });
          }else{
            this.$router.push({
              path:url,
              query:{
                id:li.id,
              }
            });
          }
        }else{
          this.$router.push(url);
        }
      },
      payForEmail(url,id){
        this.$http({
          method: 'post',
          url: 'email/pay',
          data: {"id":id}
        }).then((response)=>{
          response = response.data;
          if(response.status == 'SUCCESS'){
            this.$router.push({
              path:url,
              query:{
                id:id,
              }
            });
          }else{
            this.$message({
              type:'error',
              message:response.message,
            });
          }
        }).catch((err)=>{
          this.$message({
            type:'error',
            message:'支付失败',
          });
        });
      }
    },
    created(){
      this.isLoad = true;
      this.$http({
        method: 'get',
        url: 'email/listReceive',
        params: {
          
        },
      }).then((response)=>{
        response = response.data;
        let data = response.object;
        if(response.status == 'SUCCESS'){
          this.isLoad = false;
          this.emailList.splice(this.emailList.length,0,...data.objects);
          this.emailList.length == 0 ? this.noEmailTip = true:'';
        }
      }).catch((err)=>{
//        console.log('err',err);
      })
    }
  }
</script>
<style scoped>
  .btn{
    padding: 10px 30px;
  }
  .colorBtn{
    background-color: #f85377;
    color:white;
  }
  .header{
    box-sizing: content-box;
    padding: 20px 30px;
  }
  hr{
    margin: 0px;
    border: none;
    border-bottom: 1px solid #cacaca;
  }
  .body{
    min-height: 500px;
  }
  .emailList{
    list-style: none;
    padding: 0px 40px;
  }
  .emailList>li{
    border-bottom: 1px solid #cacaca;
    padding: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .noEmailTip{
    font-size: 1.2em;
    text-align: center;
    color: gray;
  }
  .emailInfo{
    margin-left: 20px;
    display: inline-flex;
    align-items: center;
  }
  /*.emailList>li>*{*/
    /*vertical-align: middle;*/
  /*}*/
  .portrait{
    width: 100px;
    height: 100px;
    margin: 5px 15px 5px 5px;
  }
  .sender{
    font-size: 15px;
    color: #000;
  }
  .date{
    font-size: 12px;
    color: #8d8d8d;
  }
  .emailStatus{
    font-size: 13px;
    color: #7f7f7f;
  }
  .noPay{
    color: #ff5579;
  }
  .noCheck{
    color: #fb7d9b;
  }
  .operate{
    margin-right: 20px;
    padding-top: 10px;
  }
</style>